<template>
  <div class="chart" ref="radarChart"></div>
</template>

<script setup>
import { ref, inject, onMounted, watch, nextTick } from 'vue';

const Echarts = inject('$echarts');

const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
  layerId: {
    type: String,
    default: '',
  },
  chartRadius: {
    type: String,
    default: '50%',
  },
});

const areaLineColor = ref('');
const areaColor = ref('');

const checkCustomColor = () => {
  let chartAreaFirstColor, chartAreaLastColor, chartAreaLineColor;

  switch (props.layerId) {
    // 社会价值，黄色
    case '22':
      chartAreaFirstColor = '#FFA45D';
      chartAreaLastColor = 'rgba(250,213,88,0.2)';
      chartAreaLineColor = '#FFA542';
      break;
    // 知识要求，黄色
    case '77':
      chartAreaFirstColor = 'rgba(154, 63, 255, 0.50)';
      chartAreaLastColor = 'rgba(161, 146, 255, 0.30)';
      chartAreaLineColor = 'rgba(136, 113, 234, 1)';
      break;
    //个人价值
    case '23':
      chartAreaFirstColor = 'rgba(0,194,255,0.5)';
      chartAreaLastColor = 'rgba(88,122,250,0.1)';
      chartAreaLineColor = '#3698FF';
    //通用素质要求，绿色
    case '78':
      chartAreaFirstColor = 'rgba(93, 209, 255, 1)';
      chartAreaLastColor = 'rgba(88, 250, 168, 0.6)';
      chartAreaLineColor = '#42FFC3';
      break;
    //与退役军人的匹配度，紫色
    case '82':
      chartAreaFirstColor = '#9A3FFF';
      chartAreaLastColor = 'rgba(161,146,255,0.3)';
      chartAreaLineColor = '#8871EA';
      break;
    //专业能力要求，浅蓝色
    case '76':
      chartAreaFirstColor = 'rgba(0,194,255,0.5)';
      chartAreaLastColor = 'rgba(88,122,250,0.1)';
      chartAreaLineColor = '#3698FF';
      break;

    default:
      //默认蓝色
      chartAreaFirstColor = 'rgba(0, 78, 255, 0.5)';
      chartAreaLastColor = 'rgba(88, 122, 250, 0.1)';
      chartAreaLineColor = '#4283FF';
      break;
  }
  areaLineColor.value = chartAreaLineColor;
  areaColor.value = new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      color: chartAreaFirstColor,
      offset: 0,
    },
    {
      color: chartAreaLastColor,
      offset: 0.8,
    },
  ]);
};

const myChart = ref(null);
const radarChart = ref(null);

const init = () => {
  checkCustomColor();

  // 确保DOM元素已经渲染
  if (!radarChart.value) {
    return;
  }

  // 如果图表已经存在，先销毁
  if (myChart.value) {
    myChart.value.dispose();
  }

  myChart.value = Echarts.init(radarChart.value);

  let indicator = props.chartData?.chartNameData || [],
    seriesData = props.chartData?.chartValueData || [];

  if (!indicator.length || !seriesData.length) {
    return;
  }

  // 验证数据长度是否一致
  if (indicator.length !== seriesData.length) {
    return;
  }

  let option = {
    color: [areaLineColor.value],
    radar: [
      {
        indicator,
        radius: props.chartRadius,
        center: ['50%', '50%'],
        splitNumber: 5,
        silent: true,
        triggerEvent: true,
        axisNameGap: 10,
        axisName: {
          formatter: function (value, indicator) {
            return `{a|${indicator.description}}\n{b|${indicator.value}}`;
          },
          rich: {
            a: {
              color: '#555',
              fontSize: 15,
              align: 'center',
            },
            b: {
              fontFamily: 'D-DIN-PRO-800-ExtraBold',
              fontWidth: 'bold',
              color: '#4880FF',
              fontSize: 26,
              padding: [0, 0, 0, 6],
            },
          },
          textStyle: {
            color: '#fff',
          },
        },
        axisLine: {
          lineStyle: {
            color: '#B8D6FD',
            width: 0.5,
          },
        },
        splitLine: {
          lineStyle: {
            color: [
              '#E5EEF7',
              '#E5EEF7',
              '#E5EEF7',
              '#E5EEF7',
              '#E5EEF7',
              '#B8D4F2',
            ],
          },
        },
      },
    ],
    series: [
      {
        type: 'radar',
        emphasis: {
          lineStyle: {
            width: 4,
            color: areaLineColor.value,
          },
        },
        data: [
          {
            value: seriesData,
            areaStyle: {
              color: areaColor.value,
              borderColor: areaLineColor.value,
            },
            itemStyle: {
              // 设置连接线不可见
              opacity: 0,
            },
          },
        ],
      },
    ],
  };

  try {
    option && myChart.value.setOption(option);
  } catch (error) {}

  // 添加窗口大小变化监听
  window.addEventListener('resize', () => {
    if (myChart.value) {
      myChart.value.resize();
    }
  });
};

// 监听数据变化，重新渲染图表
watch(
  () => props.chartData,
  (newData) => {
    if (newData && newData.chartNameData && newData.chartValueData) {
      nextTick(() => {
        init();
      });
    }
  },
  { deep: true }
);

onMounted(() => {
  nextTick(() => {
    init();
  });
});
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
